<template>
    <div class="content">
        <div class="h-header">
            <van-nav-bar
                    :title="title"
                    left-text="返回"
                    left-arrow
                    @click-left="onClickLeft"
            />
        </div>
        <div class="main">
            <ul class="tit">
                <li @click="tab1()">
                    上新
                </li>
                <li @click="tab2()">
                    价格
                </li>
                 <li @click="tab3()">
                    销量
                </li>
                <li @click="tab4()">
                    折扣
                </li>
            </ul>
              <ul class="more-goods-con">
                   <li v-for="(item,i) in list" :key="i" @click="detail(item.pid)">
                     <div class="more-good-wrap">
                        <img :src="item.pimg" alt="">
                     </div>
                     <h3>{{item.pname}}</h3>
                     <p>￥{{item.pprice}}</p>
                  </li>
               </ul>
        </div>
    </div>
</template>

<script>
import * as api from '../../api/getproductlist'
export default {
    name:'Classify',
    data(){
        return{
            list:[],
            title:''
        }
    },
    methods:{
        onClickLeft(){
            this.$router.go(-1)
        } ,
         tab1(){
          api.getclasspro({classid:1}).then(data=>{
         this.list=data.data.data
      })
      },
      tab2(){
          api.getclasspro({classid:2}).then(data=>{
         this.list=data.data.data
      })
      },
       tab3(){
          api.getclasspro({classid:3}).then(data=>{
         this.list=data.data.data
      })
      },
       tab4(){
          api.getclasspro({classid:4}).then(data=>{
         this.list=data.data.data
      })
      },
       detail(id){
        this.$router.push("/detailpro/" + id);
        }
    },
    mounted(){
         api.getclasspro({classid:1}).then(data=>{
         this.list=data.data.data;
         this.title=this.$route.query.title
    })
}
}
</script>

<style scoped>
.more-goods-con .more-good-wrap{
   width: 100%;
   height: 130px;
   margin-top: 15px;
   margin-bottom: 15px
}
.more-goods-con .more-good-wrap img{
   display: inline-block;
     width: 100%;
   height: 100%;
   background: red
}
.more-goods-con {
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.more-goods-con li h3,p{
   margin: 0
}
.more-goods-con li p{
   width: 100%;
   text-align: left;
   color: red;
   font-size: 12px;
   height: 30px;
}
.more-goods-con li h3{
     width:100%;
    word-break:break-all;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    font-weight: normal;
    color: #323232;
    margin-bottom: 10px
}
.more-goods-con li{
   width: 50%;
   border: 1px solid #f3f3f3;
   height: 230px;
   padding: 10px 6px;
   box-sizing: border-box;
   border-right:0;
   margin-top:-1px ;
   display: flex;
   flex-direction: column;
   align-items: center;
  justify-content:start;
  padding-bottom: 0
}
.more-goods-con li:nth-child(odd){
   border-left:0 
}
.van-nav-bar .van-icon{
    color: #333;
    margin-top: 3px
}
.van-nav-bar__title{
    font-size: 15px
}
.van-nav-bar__text{
    color: #000
}
.content{
    display: flex;
    flex-direction: column;
    background:#f3f3f3;
    height: 100vh;
}
.main{
    flex: 1;
    overflow: auto;
    background:#fff 
}
.tit{
    background: #fcfcfc;
    display: flex;
    width: 100%
}
.tit li{
    width: 24%;
    height: 40px;
    line-height: 40px;
    text-align: center;
}
</style>